<template>
  <div>{{ demoProp.title }} 状态tag</div>
  <ol>
    <li>{{ demoProp.title }} 状态tag为独立颜色控制,不随主体色改变;</li>
    <li>{{ demoProp.title }} 状态tag修改必须知会 产品、设计;</li>
    <li>{{ demoProp.title }} 状态tag不考虑兼容非状态tag功能显示;</li>
    <li>{{ demoProp.title }} 状态tag和el-tag不冲突、不互相影响;</li>
    <li>{{ demoProp.title }} 状态tag默认margin:2px;</li>
    <li>{{ demoProp.title }} 状态tag维护独立样式表，path:src/styles/tag-status.scss;</li>
    <li>{{ demoProp.title }} 状态tag状态配置文件位置，path:src/config/tagStatus.ts;</li>
    <li>{{ demoProp.title }} 状态tag拥有点击事件和关闭事件(关闭属性在 list 数据中体现);</li>
    <li>{{ demoProp.title }} 状态tag为inline-flex;</li>
    <li>同时显示多类别tag,需按照tag类别(type属性)分开调用组件;</li>
    <li>
      {{ demoProp.title }} 组件属性：
      <div>
        list: tag数据 | 类型: object[ ]; demo:{ value: "waiting_for_dispatch", label: "待发运", closable: true,show:true }
      </div>
      <div>type: tag类型 | 类型: string |具体了类型见配置文件path:src/config/tagStatus.ts</div>
      <div>handleClose: tag关闭事件 | 类型: function |关闭标签回调</div>
      <div>handleClick: tag点击事件 | 类型: function |点击回调</div>
    </li>
  </ol>
  <div>
    <status-tag :list="tags" type="transportation" @handleClose="tagClose" @handleClick="tagClick"></status-tag>
    <status-tag :list="tags2" type="customsAffairs" @handleClose="tagClose" @handleClick="tagClick"></status-tag>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ notthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import { demoProps } from "@/stores/modules/merakDemo";
import statusTag from "@/components/merakTagStatus/index.vue";
import Prism from "prismjs";
import "../prism.css";
import dropWrap from "../dropWrap.vue";

interface tagsStatus {
  value: string | number;
  label: string | " ";
  closable?: boolean;
  show:boolean|true
}

/* 响应式变量 */
const demoProp = demoProps();
const tags = reactive<tagsStatus[]>([
  { value: "waiting_for_deliver", label: "待提货", show: true },
  { value: "waiting_for_dispatch", label: "待发运", closable: true, show: true },
  { value: "warehouse_operation", label: "集货仓作业", show: true },
  { value: "warehouse_storage", label: "仓储", show: true },
  { value: "dispatch_operation", label: "发运港站作业", closable: true, show: true },
  { value: "on_the_way_transfer", label: "发往中转节点途中", show: true },
  { value: "on_the_way_cbx", label: "发往海关监管库", closable: true, show: true },
  { value: "cbx_operation", label: "海关监管库作业", show: false }
]);
const tags2 = reactive<tagsStatus[]>([
  { value: "export_export_declaration", label: "出口报关", show: true }, //出口报关
  { value: "export_inspection", label: "出口查验", show: true }, //出口查验
  { value: "export_inspection_end", label: "出口查验结束", show: true }, //出口查验结束
  { value: "export_customs_clearance", label: "出口放行",closable: true,  show: true }, //出口放行
  { value: "transfer_inspection", label: "中转查验", show: true }, //中转查验
  { value: "transfer_inspection_end", label: "中转查验结束", show: true }, //中转查验结束
  { value: "transfer_customs_clearance", label: "中转放行", show: true } //中转放行
]);

let notthtm = ref<string>(`
     属性：
     list:[
      { value: "waiting_for_dispatch", label: "待发运", closable: true ,show:true },
      { value: "waiting_for_dispatch", label: "待发运",show:true  },
      ]

     组件：
     import statusTag from "@/components/merakTagStatus/index.vue";
     <status-tag :list="tags" type="transportation" @handleClose="tagClose" @handleClick="tagClick"></status-tag>


     const tags = reactive<tagsStatus[]>([
        { value: "waiting_for_deliver", label: "待提货" },
        { value: "waiting_for_dispatch", label: "待发运", closable: true },
        { value: "warehouse_operation", label: "集货仓作业" },
        { value: "warehouse_storage", label: "仓储" },
        { value: "dispatch_operation", label: "发运港站作业", closable: true },
        { value: "on_the_way_transfer", label: "发往中转节点途中" },
        { value: "on_the_way_cbx", label: "发往海关监管库", closable: true },
        { value: "cbx_operation", label: "海关监管库作业" }
      ]);

     const tagClose = tag => {
        console.log(tag);
      };
     const tagClick = tag => {
        console.log(tag);
      };
    


`);

onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});

/* methods */
const tagClose = tag => {
  console.log("fasdfas");
  console.log(tag);
};
const tagClick = tag => {
  console.log("fasdfas---tagClick");
  console.log(tag);
};
</script>
<style lang="scss" scoped>
</style>